<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="简书是一个优质的创作社区，在这里，你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家，有着无穷的创造力。">
    <meta name="keywords" content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读">
    <title>这个世界很苦，但你要很甜 - 简书</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_474922_44h2b65sr0c3ow29.css">
    <link rel="stylesheet" th:href="@{css/reset.css}">
    <link rel="stylesheet" th:href="@{css/style.css}">
    <link rel="stylesheet" th:href="@{css/active.css}">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="nav">
            <!-- logo -->
            <a class="logo" href="index.html">
                <img src="http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png" alt="">
            </a>
            
            <ul class="menu">
                <li><a href="" class="index">首页</a></li>
                <li class="download-app"><a href="">下载APP</a></li>
                <!-- 搜索 -->
                <li id="search"><form action="" method="get" accept-charset="utf-8">
                    <input type="text" placeholder="搜索">
                    <a class="search-btn" href=""><i class="iconfont icon-fangdajing"></i></a>
                </form></li>
            </ul>

            <ul class="function">
                <li class="style-mode-btn"><a href="">Aa</a></li>
                <li class="login"><a href="login.html">登录</a></li>
                <li class="sign-in"><a href="sign-in.html">注册</a></li>
                <li class="write-btn"><a href=""><i class="iconfont icon-bi"></i> 写文章</a></li>
            </ul>
            <div class="phone-menu">
                <a href=""><i class="iconfont icon-caidan1"></i></a>
            </div>
        </div>
    </div>
    <div class="page-warp clear">
        <!-- 文章开始 -->
        <div class="page-active">
            <h1>这个世界很苦，但你要很甜</h1>
            <!-- 作者信息 -->
            <div class="author">
                <a href=""><img src="http://upload.jianshu.io/users/upload_avatars/2674946/1177b0f7-4064-4178-8f48-5437a9899c21.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96" alt=""></a>
                <div class="info">
                    <a class="name">七米霞</a>
                    <a class="follow">
                        <i class="iconfont icon-jia"></i>关注
                    </a>
                    <div class="meta">
                        <span>2017.11.16 15:10*</span>
                        <span>字数 2411</span>
                        <span>阅读 4594</span>
                        <span>评论 65</span>
                        <span>评论 65</span>
                    </div>
                </div>
            </div>
            <!-- 文章主要内容 -->
            <div class="page-active-ct">
                <img src="http://upload-images.jianshu.io/upload_images/2674946-84e291ac7cfff3a2.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/700">
                <div class="txt">
                    <p><b>在薄情的世界里深情的活着。</b></p>
                    <blockquote>01</blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ipsam eius qui illum facilis quasi reiciendis quos libero quis obcaecati deleniti, a, tempore assumenda? Quisquam reiciendis aut tenetur sequi velit.</p>
                    <p>Vel asperiores repellat sed ab labore iusto impedit deleniti doloribus optio nisi quaerat, tenetur ducimus saepe nobis quisquam laborum, voluptas deserunt possimus eveniet natus eius unde eaque quas reprehenderit? Sequi.</p>
                    <p>Porro quam modi maxime, voluptatem at quas eveniet ipsum ratione aut? Nesciunt ut mollitia voluptates in aliquam ab distinctio at ad laboriosam quia esse maxime, ipsum suscipit sit voluptas optio.</p>
                    <blockquote>02</blockquote>
                </div>
                <img src="http://upload-images.jianshu.io/upload_images/2674946-50a85aa3a1c2b66f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/700" alt="">
                <div class="txt">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ipsam eius qui illum facilis quasi reiciendis <b>quos libero quis obcaecati deleniti</b>, a, tempore assumenda? Quisquam reiciendis aut tenetur sequi velit.</p>
                    <p>Vel asperiores repellat sed ab labore iusto impedit deleniti doloribus optio nisi quaerat, tenetur ducimus saepe nobis quisquam laborum, voluptas deserunt possimus eveniet natus eius unde eaque quas reprehenderit? Sequi.</p>
                    <p>Porro quam modi maxime, voluptatem at quas eveniet ipsum ratione aut? Nesciunt ut mollitia voluptates in aliquam ab distinctio at ad laboriosam quia esse maxime, ipsum suscipit sit voluptas optio.</p>
                    <blockquote>03</blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus debitis ullam dignissimos velit cumque quos doloribus, magnam, veniam vel, incidunt ratione. Architecto voluptate minima illum iusto. Voluptatem officiis natus quod!</p>
                    <p>Repellat fuga, aut commodi consectetur facilis odit quasi pariatur quo eius, tempore facere nisi ipsam laborum explicabo reprehenderit assumenda ab recusandae, minima ratione itaque reiciendis esse. Nulla commodi maxime, cum.</p>
                    <p>Id minus, sit harum quis ea error praesentium, iure nesciunt adipisci in facilis et illum cum distinctio! Est repellat ex sint voluptate atque, vitae maiores impedit itaque officiis, sapiente eveniet.</p>
                    <p>Libero nihil culpa iure dolore alias, nobis nesciunt assumenda eligendi. Consequuntur facere, nobis! Nulla placeat consequuntur beatae illum, repellendus iste, eligendi voluptatem suscipit magni quam eveniet enim excepturi ipsam impedit.</p>
                    <p>Maiores quas dolor nisi reiciendis, vel, impedit est repellat eos id obcaecati beatae excepturi nulla sit quae eius. Necessitatibus neque, laudantium veniam ipsam labore, officia minima praesentium dignissimos iusto quae.</p>
                    <p>Facilis animi, sint, officiis fuga iure nobis perferendis aperiam illum laboriosam asperiores quo sed natus, cumque. Commodi enim vel, necessitatibus architecto, quas provident eveniet, expedita cumque consequuntur doloremque eius, dolorum.</p>
                    <p>Corporis vel aliquid accusantium eligendi veritatis quaerat voluptate sunt officiis debitis maiores et eos suscipit quia obcaecati est, ratione molestiae dolorum nihil minus sit magnam nesciunt sed libero deleniti! Nesciunt.</p>
                    <p>Sint eos animi dolorem, iusto numquam, provident cumque dolores fugit adipisci voluptas, optio voluptate fuga ducimus cupiditate impedit. Molestias expedita illum porro sapiente nihil, quos, sit sed in iste ad.</p>
                    <p><b>Neque possimus commodi nesciunt fuga.</b> Numquam doloremque cum fugit sit ut quaerat et. Consectetur est ratione atque possimus nobis accusamus veniam illum voluptas deserunt? Earum debitis laboriosam repudiandae officiis modi!</p>
                    <p>Culpa impedit alias iure ab hic vitae perferendis, odio praesentium consequatur, qui saepe iusto at debitis numquam eius doloremque vel reiciendis quibusdam dicta consectetur deserunt excepturi enim tempora. In, voluptas?</p>
                </div>
                    
                    
                

            </div>

            
            <div class="tag">
                <a href=""><i class="iconfont icon-woderiji"></i>日记本</a>
                <span class="fr">© 著作权归作者所有</span>
                <a class="fr" href="">举报文章</a>
            </div>
            <!-- 底部作者信息 -->
            <div class="block">
                <div class="author txt">
                    <a href=""><img src="http://upload.jianshu.io/users/upload_avatars/2674946/1177b0f7-4064-4178-8f48-5437a9899c21.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96" alt=""></a>
                    <div class="info">
                        <a class="follow fr">
                            <i class="iconfont icon-jia"></i>关注
                        </a>
                        <a class="name">七米霞</a>
                        <p>写了 160145 字，被 5070 人关注，获得了 5341 个喜欢</p>    
                    </div>
                    <!-- 签名 -->
                    <div class="signatrue">写温柔的字，爱坦荡的人 公众号：mixiami0712
                    </div>
                </div>
                <!-- 支持作者 -->
                <div class="support-author">
                    <p>各位看官，如果看的开心就点个小红心吧，比心</p>
                    <a class="btn">赞赏支持</a>
                </div>
                <!-- 喜欢和分享 -->
                <div class="like-active">
                    <a href="">
                        <i class="iconfont icon-aixin"></i>
                        喜欢  |  206
                    </a>
                    <div class="share-active fr">
                        <a  href=""><i class="iconfont icon-weixin"></i></a>
                        <a  href=""><i class="iconfont icon-sina"></i></a>
                        <a  href=""><i class="iconfont icon-weibiaoti102-copy"></i></a>
                        <a class="more" href="">更多分享</a>
                    </div>
                </div>
            </div>
            
            
        </div>
        <!-- 文章END -->

        <!-- 广告 -->
        <a href="" class="banner"><img src="http://cdn2.jianshu.io/assets/web/web-note-ad-1-10f08e404d3887d2d45a4bc8f1831403.png"></a>
        <div class="comment-list">
            <!-- 评论框 -->
            <div class="comment-frame">
                <a class="fl" href=""><img src="http://cdn2.jianshu.io/assets/default_avatar/avatar_default-78d4d1f68984cd6d4379508dd94b4210.png" alt=""></a>
                <div class="sign-container">
                    <a href="">登录</a>
                    <span>后发表评论</span>
                </div>
            </div>
            <div class="content-warp clear">
                <!-- 评论标题 -->
                <div class="title">
                    <span class="fl">105条评论</span>
                    <a class="fl author" href="">只看作者</a>
                    <div class="fr">
                        <a class="highlight" href="">按时间倒序</a>
                        <a href="">按时间正序</a>
                        <a href="">按喜欢排序</a>
                    </div>
                    
                </div>
                <!-- 评论 -->
                <div class="comment-content clear">
                    <div class="author">
                        <a href=""><img src="http://upload.jianshu.io/users/upload_avatars/8543586/0e87c2af-d5e9-4ffc-a036-228c6fce290a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/114/h/114" alt=""></a>
                        <div class="info">
                            <a href="">2018毕业季</a>
                            <span class="meta">5楼 · 2017.11.16 16:50</span>
                            
                        </div>
                    </div>
                    <!-- 评语 -->
                    <p class="clear">每一文字都是心灵深处的触动。</p>
                    <div class="tool-group">
                        <a href=""><i class="iconfont icon-good"></i>7人赞</a>
                        <a href=""><i class="iconfont icon-pinglun"></i>  回复</a>
                    </div>
                    <!-- 二级评论 -->
                    <div class="sub-comment-list">
                        <div class="info">
                            <a href="">七米霞</a>:
                            <a href="">@2018毕业季</a>
                            <span>哈哈，你喜欢就好。</span>
                            <div class="sub-tool-group">
                                <span>2017.11.16 16:56</span>
                                <a href=""><i class="iconfont icon-pinglun"></i>  回复</a>
                            </div>
                        </div>
                        <!-- 添加新评论 -->
                        <div class="module">
                            <a href=""><i class="iconfont icon-bi"></i>添加新评论</a>
                        </div>
                    </div>
                </div>
                <div class="comment-content clear">
                    <div class="author">
                        <a href=""><img src="http://upload.jianshu.io/users/upload_avatars/8543586/0e87c2af-d5e9-4ffc-a036-228c6fce290a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/114/h/114" alt=""></a>
                        <div class="info">
                            <a href="">2018毕业季</a>
                            <span class="meta">5楼 · 2017.11.16 16:50</span>
                            
                        </div>
                    </div>
                    <!-- 评语 -->
                    <p class="clear">每一文字都是心灵深处的触动。</p>
                    <div class="tool-group">
                        <a href=""><i class="iconfont icon-good"></i>7人赞</a>
                        <a href=""><i class="iconfont icon-pinglun"></i>  回复</a>
                    </div>
                    <!-- 二级评论 -->
                    <div class="sub-comment-list">
                        <div class="info">
                            <a href="">七米霞</a>:
                            <a href="">@2018毕业季</a>
                            <span>哈哈，你喜欢就好。</span>
                            <div class="sub-tool-group">
                                <span>2017.11.16 16:56</span>
                                <a href=""><i class="iconfont icon-pinglun"></i>  回复</a>
                            </div>
                        </div>
                        <!-- 添加新评论 -->
                        <div class="module">
                            <a href=""><i class="iconfont icon-bi"></i>添加新评论</a>
                        </div>
                    </div>
                </div>
                <!-- 评论分页 -->
                <ul class="pagination">
                    <li><a href="">1</a></li>
                    <li><a href="">2</a></li>
                    <li><a href="">3</a></li>
                    <li><a href="">4</a></li>
                    <li><a href="">下一页</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 底部推荐笔记 -->
    <div class="buttom-note">
        <div class="page-warp">
            <p class="title">被以下专题收入，发现更多相似内容</p>
            <div class="all-special">
                <a href="">
                    <img src="http://upload.jianshu.io/collections/images/20/%E5%9B%BE.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64" alt="">
                    <span>青春</span>
                </a>
                <a href="">
                    <img src="http://upload.jianshu.io/collections/images/314688/crop1503641700042.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64" alt="">
                    <span>365天极限挑...</span>
                </a>
                <a href="">
                    <img src="http://upload.jianshu.io/collections/images/95/1.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64" alt="">
                    <span>故事</span>
                </a>
                <a href="">
                    <img src="http://upload.jianshu.io/collections/images/554211/crop1508945983281.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64" alt="">
                    <span>睡美人</span>
                </a>
                <a href="">
                    <img src="http://upload.jianshu.io/collections/images/20/%E5%9B%BE.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64" alt="">
                    <span>青春</span>
                </a>
                <a href="">
                    <img src="http://upload.jianshu.io/collections/images/20/%E5%9B%BE.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64" alt="">
                    <span>青春</span>
                </a>
                <a href="">
                    <img src="http://upload.jianshu.io/collections/images/20/%E5%9B%BE.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64" alt="">
                    <span>青春</span>
                </a>
                <a class="more" href="">展开更多<i class="iconfont icon-xia"></i></a>

            </div>
            <!-- 推荐阅读 -->
            <div class="recommend-note">
                <div class="title">
                    <span>推荐阅读</span>
                    <a class="fr" href="">更多精彩内容<i class="iconfont icon-jiantou-qianjinx"></i></a>
                </div>

                <!-- 推荐文章 -->
                <div class="recommend-active">
                    <!-- 内容 -->
                    <div class="active-content">
                        <a class="title" href="#"><h3>一辈子只爱一个人，是不是很丢脸</h3></a>
                        <p class="summary">
                          毕竟喜欢只是一阵风，而爱是细水长流 今天我看到一个分手理由：其实我不敢想象，一辈子对着一个人生活的生活，那也太平淡了。我感到害怕。﻿﻿ 这是一个
                          
                        </p>
                        <a class="pic" href=""><img src="http://upload-images.jianshu.io/upload_images/2674946-dc4e99319af0325e.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240" alt=""></a>
                    </div>
                    <!-- 作者 -->
                    <span class="author clear">
                        <a href=""><img src="http://upload.jianshu.io/users/upload_avatars/2674946/1177b0f7-4064-4178-8f48-5437a9899c21.jpg" alt=""></a>
                        <a href="">七米霞</a>
                    </span>
                </div>
                <div class="recommend-active">
                    <!-- 内容 -->
                    <div class="active-content">
                        <a class="title" href="#"><h3>一辈子只爱一个人，是不是很丢脸</h3></a>
                        <p class="summary">
                          毕竟喜欢只是一阵风，而爱是细水长流 今天我看到一个分手理由：其实我不敢想象，一辈子对着一个人生活的生活，那也太平淡了。我感到害怕。﻿﻿ 这是一个
                          
                        </p>
                        <a class="pic" href=""><img src="http://upload-images.jianshu.io/upload_images/2674946-dc4e99319af0325e.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240" alt=""></a>
                    </div>
                    <!-- 作者 -->
                    <span class="author clear">
                        <a href=""><img src="http://upload.jianshu.io/users/upload_avatars/2674946/1177b0f7-4064-4178-8f48-5437a9899c21.jpg" alt=""></a>
                        <a href="">七米霞</a>
                    </span>
                </div>
                <div class="recommend-active">
                    <!-- 内容 -->
                    <div class="active-content">
                        <a class="title" href="#"><h3>一辈子只爱一个人，是不是很丢脸</h3></a>
                        <p class="summary">
                          毕竟喜欢只是一阵风，而爱是细水长流 今天我看到一个分手理由：其实我不敢想象，一辈子对着一个人生活的生活，那也太平淡了。我感到害怕。﻿﻿ 这是一个
                          
                        </p>
                        <a class="pic" href=""><img src="http://upload-images.jianshu.io/upload_images/2674946-dc4e99319af0325e.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240" alt=""></a>
                    </div>
                    <!-- 作者 -->
                    <span class="author clear">
                        <a href=""><img src="http://upload.jianshu.io/users/upload_avatars/2674946/1177b0f7-4064-4178-8f48-5437a9899c21.jpg" alt=""></a>
                        <a href="">七米霞</a>
                    </span>
                </div>

            </div>
        </div>
    </div>
    <!-- 头部END -->
    <script th:href="@{js/jquery-3.2.1.min.js}"></script>
    <script th:href="@{js/index.js}"></script>
</body>

</html>